<template>
  <div class="yc-da yc-jc-between">
    <div class="yc-fs-14">
      <span class="yc-text-success">【{{todoListCount}}】</span>
      条剩余
    </div>
    <el-radio-group v-model="checkType" size="mini" @change="handleChangeShowType">
      <el-radio-button :label="1">全部</el-radio-button>
      <el-radio-button :label="2">未完成</el-radio-button>
      <el-radio-button :label="3">已完成</el-radio-button>
    </el-radio-group>
    <el-button :disabled="!finishedCount" type="text" @click="handleDeleteFinishedTodoList">清除已完成</el-button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
  data() {
    return {
      checkType: 1,
    };
  },
  computed: {
    ...mapGetters(['todoListCount','finishedCount']),
    ...mapState(['todoList'])
  },
  methods: {
    ...mapMutations(['changeShowType']),
    ...mapActions(['deleteFinishedTodoListAsync']),
    // 修改状态
    handleChangeShowType() {
      this.changeShowType(this.checkType)
    },
    // 删除全部
    handleDeleteFinishedTodoList() {
      this.$confirm('确定清除已完成事项?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.deleteFinishedTodoListAsync()
          setTimeout(() => {
            this.$message.success('已清除已完成事项!')
          },3000)
        }).catch(() => {
                
        });
    }
  }
};
</script>